<!DOCTYPE html>
<html>
<head>
    <title>表格组件</title>
    <link rel="import" href="../_include/_jx.html?__inline">
</head>
<body>
<link rel="import" href="../_include/_loading.html?__inline">
<div class="jxlayout">
    <div class="jxlayout-wrap" style="padding-top:84px;">
        <div class="jxlayout-tool">
            <form class="jxlayout-form form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">查询关键字：</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入关键字查询">
                </div>
                <!--<div class="form-group ml-5px">-->
                <!--<label for="exampleInputEmail2">时间：</label>-->
                <!--<input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入日期">-->
                <!--</div>-->
                <button class="btn btn-primary ml-5px" type="submit">
                    <i class="fa fa-search"></i> 查询
                </button>
                <button class="btn btn-default ml-5px" type="button"
                        data-toggle="popover-x"
                        data-target="#adv_search_popover" data-placement="auto">
                    <i class="fa fa-th"></i> 高级查询
                </button>

                <div class="pull-right">

                    <div class="btn-group">
                        <a id="u_add" class="jxdialog btn btn-default"
                           data-options="{title:'业务新增',url:'page/grid.html',width:'100%',height:'100%'}">
                            <i class="fa fa-plus"></i> 新增
                        </a>
                        <a id="u_edit" class="jxdialog btn btn-default"
                           data-options="{title: '创建文章',url: 'page/winedit.html',closeBtn: 0,
                                           width:'60%',height:'50%',resize:true,
                                           btn: ['保存', '关闭']}">
                            <i class="fa fa-pencil-square-o"></i> 编辑
                        </a>
                        <a id="ux_edit" class="jxdialog btn btn-default"
                           data-options="{title: '提Bug',url:'page/wineditmore.html',
                                            width:'60%',height:'50%',resize:true,
                                            btn: ['保存', '关闭']}">
                            <i class="fa fa-pencil-square-o"></i> 复杂表单
                        </a>

                        <a class="jxlink btn btn-default" data-title="资料录入" data-url="page/edit.html">
                            <i class="fa fa-pencil-square-o"></i> 录入</a>
                        <a id="jx_delete" class="btn btn-default"><i class="fa fa-trash-o"></i> 删除</a>
                        <div class="btn-group">
                            <button id="jx_more" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-reorder"></i> 更多 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li id="jx_memberadd"><a href="#">添加成员</a></li>
                                <li id="jx_memberlook"><a href="#">查看成员</a></li>
                                <li id="jx_authorize"><a href="#">功能授权</a></li>
                                <li id="jx_dataauthorize"><a href="#">数据授权</a></li>
                            </ul>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-filter"></i> 访问过滤 <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li id="jx_ipfilterx"><a href="#"><i></i> IP过滤</a></li>
                            <li id="jx_timefilterx"><a href="#"><i></i> 时段过滤</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">其他</a></li>
                        </ul>
                    </div>

                    <a id="jx_import" class="btn btn-default">
                        <i class="fa fa-sign-in"></i>&nbsp;快速导入
                    </a>

                </div>
            </form>
            <div style="height:30px;line-height: 30px;font-size: 16px;border-bottom: 1px solid #ccc;text-align: center;">
                总数：<b class="color-red mr-5">22</b>
                平均数：<b class="color-green mr-5">82</b>
                业户数：<b class="color-blue mr-5">182</b>
            </div>
        </div>

        <div class="jxlayout-body jfgrid" id="girdtable"
             data-url="../api/grid.json"
             data-head-data="[
                {label:'客户编号',name:'F_EnCode',width:130, align:'center',sort:true,statistics:true},
                {label:'客户名称',name:'F_FullName',width:200, align:'left',sort:true,statistics:true},
                {label:'客户级别',name:'F_CustLevelId',width:100, align:'center'},
                {label:'客户类别', name:'F_CustTypeId', width:100, align:'center'},
                {label:'客户程度', name:'F_CustDegreeId', width:100, align:'center'},
                {label:'公司行业', name:'F_CustIndustryId', width:100, align:'center'},
                {label:'联系人',name:'F_Contact',width:100, align:'center'},
                {label:'跟进人员', name:'F_TraceUserName', width:100, align:'center'},
                {label:'最后更新',name:'F_ModifyDate',width:80,align:'center',formatter: modifyDateFormatter},
                {label:'备注', name:'F_Description', width:100, align:'center'}
             ]"></div>
    </div>
</div>
<div id="adv_search_popover" class="popover popover-default popover-lg">
    <div class="arrow"></div>
    <div class="popover-title">
        <span class="close" data-dismiss="popover-x">&times;</span>高级查询
    </div>
    <div class="popover-content">
        <form id="adv_search_popover_form" class="form-horizontal" action="" method="post">

            <div class="form-group">
                <label class="col-sm-3 control-label">单据编号</label>
                <div class="col-sm-8 pl-5">
                    <input type="text" class="form-control" id="currentPwd" name="currentPwd" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">客户名称</label>
                <div class="col-sm-8 pl-5">
                    <input type="text" class="form-control" id="newPwd" name="newPwd" autocomplete="off">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">销售人员</label>
                <div class="col-sm-8 pl-5">
                    <input type="text" class="form-control" id="confirmPwd" name="confirmPwd" autocomplete="off">
                </div>
            </div>

        </form>
    </div>
    <div class="popover-footer">
        <button class="btn btn-sm btn-primary" id="btnPopoverSave">
            <i class="fa fa-search"></i> 查询
        </button>
        <a class="btn btn-sm btn-default" id="btnPopoverCancel"
           onclick="document.getElementById('adv_search_popover_form').reset()">
            <i class="fa fa-undo"></i> 重置
        </a>
    </div>
</div>
<script>

        $('#girdtable').options({
            onSelectRow:function (ss) {
                console.log(ss);
            }
        });


    function modifyDateFormatter(d) {
        return '<i class="fa fa-toggle-on"></i>';
        //return b.formatDate(d, 'yyyy-MM-dd hh:mm')
    }
</script>
</body>
</html>